<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/style.css" rel="stylesheet" type="text/css" />
		<link href="../../../css/mui.css" rel="stylesheet" type="text/css" />
		<style>
			#shopcontent{
				background: #fff;
			}
			.shopcontentinfotop{
				
				margin: 0 auto; 
				font-size: 14px;  
			}
			.shopcontentinfotop .title{
				margin-top: 0.2rem;
				padding: 0 0.2rem;
			}
			.shopbtn{
				position: fixed;
				bottom: 0;
				width: 100%;
				background: #fff;
				height: 50px;
				line-height: 50px;
				padding: 0 0.3rem;
				box-shadow: 0px 10px 40px #000;
			}
			.nowbuy{
				background: #e10052;
				border-radius: 20px;
				color: #fff;
				font-size: 14px;
				width: 2rem;
				text-align: center;
				display: inline-block;
				height: 0.5rem;
				line-height: 0.5rem;
			}
			.swiper-container img{
				height:300px 
			}
			.needjifen{
				color: #e32241;
				padding: 0.1rem 0;
			}
			.kucun{
				background: #95cdfe;
				border-radius: 10px;
				color: #fff;
				font-size: 10px;
				padding: 0 0.2rem;
				margin-top: 0.15rem;
				height: 0.3rem;
				line-height: 0.35rem;
			}
			.needjifenborder{
				border-bottom: solid 1px #f1f1f1;
				padding:0 0.2rem;
			}
			.choose{
				padding: 0.2rem 0.2rem;
				padding-bottom: 0.1rem;
			}
		</style>
	</head>

	<body>
		<div id="shopcontent">
			<div class="swiper-container" style="height: 300px;"> 
				<div class="swiper-wrapper"></div>
				<div class="pagination"></div>
			</div>
			<div class="shopcontentinfo" >
				<div class="shopcontentinfotop">  
					<div class="title">{{items.NAME}}</div>
					<div class="needjifenborder">
						<span class="needjifen fl">所需积分：{{items.POINT}}</span>
						<span class="kucun fr">库存剩余：{{items.COUNT}}件</span>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
					<div class="choose"><span>已选</span><span>1</span>件</div> 
					<div class="shopcontentimage" id="shopcontentImage">
					</div>
				</div>
				
			</div>
			<div class="shopbtn">
				<div class="buybox fl">
					<span>购买数量</span> 
					<span class="leftbtn" id="leftbtn"><font class="mui-icon mui-icon-minus"></font></span>
					<span class="buycount" id="buycount">1</span>
					<span class="rightbtn" id="rightbtn"><font class="mui-icon mui-icon-plus"></font></span>
				</div>
				<div class="fr">
					<span class="nowbuy" id="nowbuy">
						立即兑换
					</span>
					
				</div>
			</div>
		</div>
	<script type="text/javascript" src="../../../js/jquery-1.8.3.min.js"></script>
	<script src="../../../js/idangerous.swiper.min.js"></script>
	<script src="../../../js/mui.js"></script>
	<script src="../../../js/vue.min.js"></script>
	<script src="../../../js/app.js"></script>

	<script src="../../../js/token.js"></script>
		<script type="text/javascript">
			mui.init();
			var needjifen='';
			var alljifen='';
			var kucun='';
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();  
				state = app.getState();
				memberToken = state.memberToken
				uid = state.userid;
				instid = self.instid;
				mui.post(Apiurl+'shop/info',{
					uid:uid,
					memberToken:memberToken,
					id:instid
				},function(data){
					console.log(JSON.stringify(data))
					shopcontent.items=data;
					document.getElementById('shopcontentImage').innerHTML=data.INFO; 
					needjifen=data.POINT;
					alljifen=data.sum;
					kucun=data.COUNT;
					
				},'json')
				//轮播图
			mui.post(Apiurl+'index/banner', {
				uid: uid,
				memberToken: memberToken,
				type: 7
			}, function(data) {
				var bannerHtml = "";
				//alert(JSON.stringify(data[0].banner_pic))
				for(var i = 0; i < data.length; i++) {
					bannerHtml += "<div class=\"swiper-slide\" onclick=\"open_detail('" + data[i].banner_url + "','" + data[i].banner_title + "');\"><img src='" + data[i].banner_pic + "'></div>";
				}
				$(".swiper-wrapper").html(bannerHtml);
				var mySwiper = new Swiper('.swiper-container', {
					loop: true,
					pagination: '.pagination',
					paginationClickable: true,
					moveStartThreshold: 100,
					centeredSlides: true,
					autoplay: 3500,
					autoplayDisableOnInteraction: false
				})
				
			}, 'json')
			})
			var shopcontent = new Vue({
				el: '#shopcontent',
				data: {
					items:[],
				},
			})
			document.getElementById('leftbtn').addEventListener('tap',function(){
				
				if(document.getElementById('buycount').innerHTML<=1){
					plus.nativeUI.toast('最少选择一件', {
							verticalAlign: 'middle'
						});
				}else{
					document.getElementById('buycount').innerHTML--
				}
				 
			})
			document.getElementById('rightbtn').addEventListener('tap',function(){
				if(needjifen*document.getElementById('buycount').innerHTML>=alljifen){
					plus.nativeUI.toast('您的积分不足', {
							verticalAlign: 'middle'
						});
				}else if(document.getElementById('buycount').innerHTML>=kucun){
					plus.nativeUI.toast('库存不足', {
							verticalAlign: 'middle'
						});
				}else{
					document.getElementById('buycount').innerHTML++
				}
				
			})
			document.getElementById('nowbuy').addEventListener('tap',function(){
				
				mui.openWindowWithTitle({
							url: 'shopconfirm.html',
							id: 'shopconfirm',
							preload: true,
							show: {
								aniShow: 'pop-in',
								autoShow: true
							},
							extras: {
								shopid: instid,
								count:document.getElementById('buycount').innerHTML
							},
							createNew:true, 
							styles: {
								"render": "always",
								"popGesture": "hide",
								"bounce": "vertical",
								"bounceBackground": "#efeff4",
								"titleNView": titleNView = { //详情页原生导航配置
									autoBackButton: true, //自动绘制返回箭头
									backgroundColor: '#fff', //导航栏背景色
									titleText: '确认订单', //导航栏标题
									titleColor: '#000', //文字颜色
									//coverage:"120px",
									//type: 'transparent', //透明渐变样式
									
								}
							},
							
						});
				
			})
		</script>
	</body>

</html>